<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<<html>
<body>    
 <script language="javascript" src="${pageContext.request.contextPath}/uicore/assets/js/libs/jquery.min.js"></script>    
 <script type="text/javascript">   
 $(document).ready(function(){   
             $("td:eq(2)",$("tr")).hide();   
            $("td:eq(3)",$("tr")).hide();   
             $("td:eq(4)",$("tr")).hide();   
           $("#button1").click(function(){   
                     $("td:eq(2)",$("tr")).toggle(1000); //设置为0表示不用动画 ，1000就1秒的时间来展示或者隐藏  
                     $("td:eq(3)",$("tr")).toggle(1000);    
                  $("td:eq(4)",$("tr")).toggle(1000);    
                  });       
     });              
 </script>   
 <input type="button" id="button1" value="隐藏/显示后三列"/>    
 <table id="mytable"  border="1"  cellpadding="0"  
    cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">   
    <tr >   
        <td width="200">第一列</td>   
         <td  width="200">第二列</td>   
       <td  width="200">第三列</td>   
       <td  width="200">第四列</td>   
        <td  width="200">第五列</td>   
    </tr>     
    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>         
    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>        
    <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>   
       
     <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>         
   <tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>   
 </table>     
 </body>  
 </html> 